<template>
  <div class="container">

   <el-row>


           <el-row  class="nav-bar">
             <el-menu  class="el-menu-demo" mode="horizontal">
            <!--   <el-menu-item index="1" v-for="item in 10">书籍</el-menu-item>-->
               <el-menu-item v-for="nav in navs" :index="nav.id" :key="nav.id">{{nav.title}}</el-menu-item>

             </el-menu>
           </el-row>

           <el-row >
             <el-col span="22" offset="1"><div class="nav-query"> <img style="clear: both;" :src="query.logo_img"/></div></el-col>
           </el-row>

          <el-row span="22" offset="1">
            <div class="nav-inner"> nav-inner</div>
          </el-row>
   </el-row>

    <el-row>

         <el-col span="14" offset="1">
            <div class="info">

              <div>
                 <h1>{{book.name}}</h1>
                  <div>{{book.author}}</div>
              </div>

            </div>
         </el-col>
         <el-col span="8">
           <div class="other">
              其他信息
           </div>
         </el-col>
    </el-row>



  </div>

</template>

<script>
  export default {
    name: "info",
    data:function () {
      return{
         navs:[],
         query:{
           logo_img :"https://img3.doubanio.com/dae/accounts/resources/d3e2921/book/assets/lg_book_a11_1.png?s=1"
         },
         book:{

         }
      }
    },
    mounted() {

       this.navs.push({
         id:1,
         title:'豆瓣'
       })

      this.navs.push({
        id:2,
        title:'电影'
      })
      this.navs.push({
        id:3,
        title:'书籍'
      });
        this.book= {
                 name:'book1',
               author:'david'
        }
    }


  }
</script>

<style scoped>
.nav {
    width: 100%;
    height: 150px;
    background-color: #e9e9e2;
}
.info{

   width: 100%;
   height: 900px;
   background-color: green;
   padding:30px ;
}

.other{

  width: 100%;
  height: 1000px;
  background-color: aquamarine;
}

.nav-bar{
   width: 100%;
   height: 50px;
   background-color: gray;
}

.nav-query{
  width: 100%;
  height: 56px;
  background-color: #e9e9e2;
  padding: 10px;
}

.nav-inner {
  width: 100%;
  height: 15px;
  background-color: #b93480;
  padding: 10px;
}

.el-menu-demo{
  background-color: rgb(84, 92, 100);
}

</style>
